﻿<ul>
  <template v-for="(item,index) in listData">
    <template v-if="!item.icon && !item.url && item.level===1">
      <li class="title" :data-id="item.name">{{item.displayName}}</li>
      <sidebar-list :list-data="item.items"> </sidebar-list>
    </template>

    <li
      v-if="!item.icon &&!item.url && item.level > 1"
      :class="{active: !!item.active}"
      :data-id="item.name"
    >
      <span class="arrow" data-toggle="expand"><i class="icon fa"></i></span>
      <a href="javascript:;" data-toggle="expand" target="_self"
        >{{item.displayName}}
      </a>
      <sidebar-list :list-data="item.items"> </sidebar-list>
    </li>

    <li
      v-if="!!item.icon&&!!item.url"
      :class="{current: !!item.current}"
      :data-id="item.name"
    >
      <a :href="item.url" @click.prevent="SPAClick(item,$event)" target="_self">
        <i :class="item.icon"></i>
        {{item.displayName}}
      </a>
    </li>

    <li
      v-if="!!item.icon && !item.url"
      :class="{active: !!item.active}"
      :data-id="item.name"
    >
      <span class="arrow" data-toggle="expand"><i class="icon fa"></i></span>
      <a href="javascript:;" data-toggle="expand" target="_self">
        <i :class="item.icon"></i>
        {{item.displayName}}
      </a>
      <sidebar-list :list-data="item.items"> </sidebar-list>
    </li>

    <li
      v-if="!item.icon && !!item.url"
      :class="{current: !!item.current, active: !!item.active}"
      :data-id="item.name"
    >
      <span v-if="item.items.length>0" class="arrow" data-toggle="expand"
        ><i class="icon fa"></i
      ></span>
      <a :href="item.url" @click.prevent="SPAClick(item,$event)" target="_self">
        {{item.displayName}}
      </a>
      <sidebar-list :list-data="item.items"> </sidebar-list>
    </li>
  </template>
</ul>
